<template>
  <view class="container u-padding-bottom-90">
    <view class="title">{{ article.post_title }}</view>
    <view class="sub">
      <text class="date">发布于：{{ article.published_time }}</text>
      <text class="hits">阅读量：{{ article.post_hits }}</text>
    </view>
    <view class="u-content">
      <!-- loading-img: 文章图片加载中显示的占位图 -->
      <u-parse :html="article.post_content" :lazy-load="true" :loading-img="loadingImg" :show-with-animation="true" @load="showSource = true"></u-parse>
    </view>
    <view class="post_source" v-if="article.post_source && showSource">
      注：本文转载自
      <text class="target">{{ article.post_source }}</text>
      ，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。
    </view>
    <div class="bottom-box">
      <u-search @tap="goComment" shape="square" :show-action="false" placeholder="发表评论" search-icon="chat" margin="0 10rpx 0 20rpx" disabled></u-search>
      <div class="icon-box" @tap="goComment">
        <u-icon name="chat" size="50"></u-icon>
        <text class="num">{{ article.comment_count }}</text>
      </div>
      <div class="icon-box" @tap="doLike">
        <u-icon name="thumb-up-fill" color="#FF9900" size="50" v-if="isLike"></u-icon>
        <u-icon name="thumb-up" size="50" v-else></u-icon>
        <text class="num">{{ article.post_like }}</text>
      </div>
      <div class="icon-box" @tap="doFavorite">
        <u-icon name="star-fill" color="#FF9900" size="50" v-if="isFavorite"></u-icon>
        <u-icon name="star" size="50" v-else></u-icon>
        <text class="num">{{ article.post_favorites }}</text>
      </div>
      <button class="icon-box" open-type="share" @tap="share"><u-icon name="share" size="50" color="#2979ff"></u-icon></button>
    </div>
    <u-toast ref="uToast" />
    <!-- 断网提示 -->
    <u-no-network />
  </view>
</template>

<script>
// #ifdef  H5
import tools from '@/common/tools.js';
// #endif
const loadingImg = 'http://qiniu.hrai.online/Fj5Cx5GqeSYh7fzabLv-fwYKUZdr.png'; // 默认图
export default {
  data() {
    return {
      id: null,
      article: {},
      showSource: false, // u-parse 加载完再显示文章来源
      isLike: 0, // 是否点赞
      isFavorite: 0, // 是否收藏
      loading: false,
      loadingImg: loadingImg
    };
  },
  onLoad(options) {
    this.id = options.id;
    if (this.$isLogin()) {
      // 如果用户登录，判断是否点赞和收藏该文章
      this.chekLikeAndFavorite();
    }
  },
  onShow() {
    this.getArticle();
  },
  // 设置小程序分享参数
  onShareAppMessage() {
    return {
      path: this.article.thumbnail || this.loadingImg,
      title: this.article.post_title || 'unicmf',
      imageUrl: `/pages/artile/artile?id=${this.id}`
    };
  },
  methods: {
    // 获取文章详情
    getArticle() {
      this.$api.get({
        url: `portal/articles/${this.id}`,
        success: res => {
          if (res.code == 1) {
            this.article = res.data;
          } else {
            this.$toast(res.msg);
          }
        }
      });
    },
    // 判断用户是否收藏和点赞
    chekLikeAndFavorite() {
      this.$api.get({
        url: `portal/articles/chekLikeAndFavorite`,
        data: {
          articleId: this.id
        },
        success: res => {
          if (res.code == 1) {
            this.isLike = res.data.isLike;
            this.isFavorite = res.data.isFavorite;
          }
        }
      });
    },
    // 跳转评论页
    goComment() {
      this.$u.route(`pages/comment/comment?articleId=${this.article.id}`);
    },
    // 点赞
    doLike() {
      if (this.loading) {
        return; // 防止连续点击
      }
      this.loading = true;
      this.$api.post({
        url: 'portal/articles/doLike',
        data: {
          id: this.id
        },
        success: res => {
          let type = 'error';
          if (res.code == 1) {
            type = 'success';
            this.isLike = 1;
            this.article.post_like++;
          }
          this.$refs.uToast.show({
            title: res.msg,
            type: type
          });
        },
        complete: () => {
          this.loading = false; // 请求完成，释放点击
        }
      });
    },
    // 收藏
    doFavorite() {
      if (this.loading) {
        return; // 防止连续点击
      }
      let url = 'portal/articles/doFavorite';
      if (this.isFavorite) {
        url = 'portal/articles/cancelFavorite'; // 已经收藏则取消收藏
      }
      this.$api.post({
        url: url,
        data: {
          id: this.id
        },
        success: res => {
          let type = 'error';
          if (res.code == 1) {
            let count = this.article.post_favorites;
            type = 'success';
            if (this.isFavorite) {
              this.isFavorite = 0;
              count = count > 0 ? count - 1 : 0; // 取消收藏时，文章收藏数不能小于0
            } else {
              this.isFavorite = 1;
              count++;
            }
            this.article.post_favorites = count;
          }
          this.$refs.uToast.show({
            title: res.msg,
            type: type
          });
        },
        complete: () => {
          this.loading = false; // 请求完成，释放点击
        }
      });
    },
    // 分享
    share() {
      // #ifdef  H5
      if (tools.clipboardData(`${this.article.post_title} ${this.$uniHost}/#/pages/article/article?id=${this.id}`)) {
        this.$toast('链接已复制到粘贴板，去分享给好友吧！');
      }
      // #endif

      // #ifdef  APP-PLUS
      plus.share.sendWithSystem(
        { content: this.article.post_title, href: `${this.$uniHost}/#/pages/article/article?id=${this.id}` },
        function() {
          console.log('分享成功');
        },
        function(e) {
          console.log('分享失败：' + JSON.stringify(e));
        }
      );
      // #endif
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 90rpx;
}
.u-content {
  margin: 20rpx;
  color: $u-content-color;
  font-size: 32rpx;
  line-height: 1.8;
}
.title {
  margin: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
}
.sub {
  display: flex;
  align-items: center;
  margin: 20rpx;
  color: #999999;
  font-size: 30rpx;
  .date {
    margin-right: 30rpx;
  }
}
.post_source {
  margin: 20rpx;
  font-weight: bold;
  font-size: 24rpx;
  word-break: break-all;
}
.bottom-box {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 90rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  .icon-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 90rpx;
    .num {
      position: absolute;
      font-size: 22rpx;
      color: #999999;
      top: -10rpx;
      right: -2rpx;
    }
  }
}
</style>
